﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="jQuery, Switchable, Tabs, Slide, Scrollable, UI, Plugin, Ajax" />
	<meta name="description" content="jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration，支持自定义Effect，支持自主开发Plugin。" />
	<link href="../../css/css.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
	.slide-trigger {
		position:relative;
		top:-25px;
		width:465px;
		text-align:right;
		padding-right:5px;
	}
	.slide-trigger a {
		display:inline-block;
		margin-right:3px;
		width:16px;
		height:16px;
		line-height:16px;
		text-align:center;
		color:#d94b01;
		background-color:#fff5e1;
		border:1px solid #f47500;
		outline:none;
		overflow:hidden;
	}
	.slide-trigger a:hover { text-decoration:none; }
	.slide-trigger a.current {
		width:18px;
		height:18px;
		line-height:18px;
		font-weight:bold;
		color:#FFF;
		background:url(../../image/t-bg.png) repeat-x;
	}
	
	.slide-panel {
		/* 下面四项必须设置 */
		position:relative;
		width:470px;
		height:150px;
		overflow:hidden;
		
		border:1px solid #B6D1E6;
	}
	.slide-panel div { position:absolute; }
	.slide-panel div img {
		display:block; /* fix img's 3px bug in ie6*/
		width:470px;
		height:150px;
	}

	/* Horizontal Special */
	#slide1 div { width:2010em; /* 设置足够的宽度 */ }
	#slide1 div img { float:left; }
	</style>

	<!-- syntaxhighlighter -->
	<link href="../../../asset/styles/shCore.css" rel="stylesheet" type="text/css" />
	<link href="../../../asset/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

	<link href="/asset/favicon.png" rel="icon" type="image/png" />
	<title>Demos | jQuery.Switchable</title>
	<script type="text/javascript" src="../../../asset/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.switchable[all].min.js"></script>

	<!-- syntaxhighlighter -->
	<script type="text/javascript" src="../../../asset/scripts/shCore.js"></script>
	<script type="text/javascript" src="../../../asset/scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="../../../asset/scripts/shBrushXml.js"></script>

	<script type="text/javascript">
	$(function(){
		$("#trigger1").switchable("#slide1 > div > img", { effect: "scroll" });
		$("#trigger2").switchable("#slide2 > div > img", { effect: "scroll", vertical: true });
	});
	
	// syntaxhighlighter
	SyntaxHighlighter.config.clipboardSwf = "../asset/scripts/clipboard.swf";
	SyntaxHighlighter.all();
	</script>
</head>

<body>
<div id="header">
	<div id="logo"></div>
	<div id="nav">
		<a href="../../../switchable">Home</a>
		<a href="../../download.html">Download</a>
		<a href="../../demos" class="current">Demos</a>
		<a href="http://t.sina.com.cn/jsw0528" title="Follow me on Sina" class="sina" target="_blank">Sina</a>
		<a href="http://twitter.com/jsw0528" title="Follow me on Twitter" class="twitter" target="_blank">Twitter</a>
	</div>
</div>

<div class="wrap clearfix">
	<h2>Horizontal/Vertical Scrolling</h2>
	<br />
	
	<h3>Horizontal</h3>
	<div id="slide1" class="slide-panel">
		<div>
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-27/100227200543.jpg" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-25/100225114729.gif" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-26/100226150931.jpg" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-25/100225173603.jpg" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-22/100222173158.jpg" />
		</div>
	</div>
	<div id="trigger1" class="slide-trigger"><!-- 自动创建 triggers --></div>
	
	<h3>Vertical</h3>
	<div id="slide2" class="slide-panel">
		<div>
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-27/100227200543.jpg" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-25/100225114729.gif" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-26/100226150931.jpg" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-25/100225173603.jpg" />
			<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-22/100222173158.jpg" />
		</div>
	</div>
	<div id="trigger2" class="slide-trigger"><!-- 自动创建 triggers --></div>
	
	<h3>jQuery Code:</h3>
	<pre class="brush: js;">
	$(function(){
		/* Horizontal */
		$("#trigger1").switchable("#slide1 > div > img", { effect: "scroll" });
		
		/* Vertical */
		$("#trigger2").switchable("#slide2 > div > img", { effect: "scroll", vertical: true });
	});
	</pre>

	<h3>HTML Code:</h3>
	<pre class="brush: html;">
	<!-- container -->
	&lt;div class="slide-panel"&gt;
		<!-- wrapper -->
		&lt;div&gt;
			<!-- panels -->
			&lt;img /&gt;
			&lt;img /&gt;
			&lt;img /&gt;
			&lt;img /&gt;
			&lt;img /&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="slide-trigger"&gt;<!-- 自动创建 triggers -->&lt;/div&gt;
	</pre>
</div>

<p class="copyright">
<script type="text/javascript" src="http://s122.cnzz.com/stat.php?id=1946178&web_id=1946178&show=pic1"></script>
&copy;2010 IlikejQuery.com
</p>
</body>
</html>
